<template>
    <div class="mb-right" id="r">
        <!--最新资讯-->
        <div class="mr-news">
            <div class="mrn-title">

            </div>
            <ul>
                <li v-for="(item,index) in newsList.slice(0,7)" :key="index" @click="toDetail(item.uidpk)">
                <a href="javascript:void(0);">{{ item.title }}</a>
                </li>

            </ul>
        </div>

        <!--品牌故事-->
        <div class="story">
            <!--品牌标题-->
            <div class="story-title">

            </div>
            <ul class="brand-box">
                <li>
                    <a href="javascript:void(0);">
                        <img src="./images/brand01.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="./images/brand02.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="./images/brand03.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="./images/brand04.png" alt="">
                    </a>
                </li>
            </ul>
        </div>


        <!--最新案例-->
        <div class="case">
            <!--标题-->
            <div class="selqa-title">

            </div>
            <ul class="sel-nav">
                <li v-for="(item,index) in newsList.slice(0,10)" :key="index" @click="toDetail(item.uidpk)">
                <a href="javascript:void(0);">{{ item.title }}</a>
                </li>
            </ul>
        </div>

        <!--人物专访-->
        <div class="interview">
            <!--标题-->
            <div class="interview-title">

            </div>
            <div>
                <img src="./images/person.png" alt="">
            </div>
            <ul class="interview-nav">
                <li v-for="(item,index) in newsList.slice(0,3)" :key="index" @click="toDetail(item.uidpk)">
                <a href="javascript:void(0);">{{ item.title }}</a>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    export default {
        name: "newsRight",
        data() {
            return {
                newsList: [],
                newsDetail:[],
            }
        },
        methods: {
            // 获取新闻列表
            getRandomNews() {
                this.axios.get(this.api.getRandomNewsListApi)
                    .then(res => {
                        // console.log(res)
                        if (res.status === 200) {
                            this.newsList = res.data
                        }
                    })
                    .catch(err => {
                        this.$message({
                            type: "error",
                            message: "加载错误!"
                        })
                    })
            },
            // 跳转到新闻详情页面
            toDetail(id) {
                // console.log(id);

                this.$router.push({
                    name: "newsDetails",
                    params: {
                        sid: id
                    }
                })
            },
        },
        created() {
            this.getRandomNews()
        }
    }
</script>

<style lang="less">

    #r {
        //flex: 0 0 307px;
        //height: 100px;
        width: 307px;
        position: absolute;
        top: 0;
        right: 0;
        //background-color: #8effa9;

        /* 最新资讯 */

        .mr-news {
            width: 100%;
            border: 1px solid #c2d1d2;
            background: #fff;
            //margin-top: 21px;
            padding: 7px 6px 8px 6px;
            margin-bottom: 20px;

            .mrn-title {
                height: 68px;
                background: url("./images/news_title.png") no-repeat center center;
                background-size: contain;
            }

            ul {
                padding-left: 18px;
                padding-right: 18px;
                margin-top: 18px;

                li {
                    width: 260px;
                    font-size: 16px;
                    color: #4f646a;
                    overflow: hidden; /*超出部分隐藏*/
                    white-space: nowrap; /*不换行*/
                    text-overflow: ellipsis; /*超出部分文字以...显示*/
                    position: relative;
                    margin-bottom: 10px;

                    &:nth-child(-n+3) {
                        &:before {
                            background-color: #f32222;
                        }
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: 0;
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background-color: #4f646a;
                    }

                    a {
                        padding-left: 15px;

                        &:hover {
                            color: #f32222;
                        }
                    }
                }
            }
        }

        /* 品牌故事 */

        .story {
            border-width: 4px 1px 1px 1px;
            border-style: solid;
            border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
            padding-left: 18px;
            padding-right: 14px;
            padding-bottom: 18px;
            background-color: #fff;
            /* 品牌标题 */

            .story-title {
                margin-top: 22px;
                margin-bottom: 15px;
                padding-bottom: 26px;
                height: 35px;
                background: url("./images/story_title_img.png") no-repeat center center;
                background-size: contain;
            }

            .brand-box {
                display: flex;
                justify-content: space-between;
                flex-flow: row wrap;

                li {
                    flex: 0 0 132px;
                    margin-bottom: 8px;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;


                        img {
                            display: block;
                            width: 100%;

                            &:hover {
                                transform: scale(1.01);
                            }
                        }
                    }
                }
            }
        }


        /* 最新案例 */

        .case {
            padding-top: 23px;
            padding-left: 17px;
            padding-right: 13px;
            width: 306px;
            padding-bottom: 20px;
            //background-color: pink;
            margin-top: 30px;
            margin-bottom: 23px;
            border-width: 4px 1px 1px 1px;
            border-style: solid;
            border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
            background-color: #fff;
            /* 标题 */

            .selqa-title {
                height: 37px;
                background: url("./images/new-case-title-img.png") no-repeat center center;
                background-size: contain;
                margin-bottom: 12px;
            }

            .sel-nav {
                border-top: 1px solid #eaeaea;
                padding-top: 25px;
                padding-left: 8px;
                padding-right: 4px;

                li {
                    position: relative;
                    padding-left: 20px;


                    margin-bottom: 10px;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: 16px;
                        color: #4f646a;
                    }

                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 0;
                        transform: translateY(-50%);
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background-color: #4f646a;
                    }

                    &:nth-of-type(-n+3) {
                        &::before {
                            background-color: #e71f19;
                        }
                    }

                    &:hover {
                        a {
                            color: #e71f19;

                        }

                        &::before {
                            background-color: #e71f19;
                        }
                    }
                }
            }
        }

        /* 人物专访 */

        .interview {
            padding-top: 23px;
            padding-left: 17px;
            padding-right: 13px;
            width: 306px;
            padding-bottom: 20px;
            //background-color: pink;
            margin-top: 30px;
            margin-bottom: 23px;
            border-width: 4px 1px 1px 1px;
            border-style: solid;
            border-color: #e71f19 #c2d1d2 #c2d1d2 #c2d1d2;
            background-color: #fff;
            /* 标题 */

            .interview-title {
                height: 37px;
                background: url("./images/interview_title_img.png") no-repeat center center;
                background-size: contain;
                margin-bottom: 30px;
            }

            img {
                width: 270px;
                height: 168px;
                background-color: #000000;
                border-radius: 5px;
                display: block;
            }

            .interview-nav {
                margin-top: 31px;

                li {
                    position: relative;
                    padding-left: 20px;


                    margin-bottom: 10px;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: 16px;
                        color: #4f646a;
                    }

                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 0;
                        transform: translateY(-50%);
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background-color: #4f646a;
                    }

                    &:nth-of-type(-n+3) {
                        &::before {
                            background-color: #e71f19;
                        }
                    }

                    &:hover {
                        a {
                            color: #e71f19;

                        }

                        &::before {
                            background-color: #e71f19;
                        }
                    }
                }
            }
        }
    }

</style>
